<template>
  <div>
    <el-form :model="form" :ref="relForm" :rules="rules" class="demo-ruleForm" v-bind="$attrs">
      <template v-for="(item,index) in formNodeList">
        <el-form-item :key="index" :label="item.label" :prop="item.prop" :labelWidth="labelWidth">
          <!-- input -->
          <a-input
            v-if="item.type === 'input'"
            :placeholder="item.placeholder"
            v-model="form[item.prop]"
            :style="item.style"
            v-bind="$attrs"
            :size="item.size"
            :disabled="item.disabled"
            @change="inputChange(item.change,$event)"
            @blur="inputBlur(item.blur,$event)"
          >
            <a-icon :slot="item.slot" :type="item.icon" v-if="item.slot" />
          </a-input>
          <!-- select -->
          <a-select
            v-model="form[item.prop]"
            :placeholder="item.placeholder"
            v-if="item.type === 'select'"
            :style="item.style"
            :size="item.size"
            @change="selectChange(item.change,$event)"
            :disabled="item.disabled"
          >
            <a-select-option :value="i.value" v-for="i in item.option" :key="i.value">{{i.label}}</a-select-option>
          </a-select>
          <!-- checkbox -->
          <a-checkbox-group
            v-model="form[item.prop]"
            v-if="item.type === 'checkbox'"
            :style="item.style"
            :size="item.size"
            :disabled="item.disabled"
            @change="checkboxChange(item.change,$event)"
          >
            <a-checkbox :value="i.value" v-for="i in item.checkboxValue" :key="i.value">{{i.label}}</a-checkbox>
          </a-checkbox-group>
          <!-- radio -->
          <a-radio-group
            v-model="form[item.prop]"
            :style="item.style"
            :size="item.size"
            v-if="item.type === 'radio'"
            :disabled="item.disabled"
            @change="radioChange(item.change,$event)"
          >
            <a-radio :value="i.value" v-for="i in item.radioValue" :key="i.value">{{i.label}}</a-radio>
          </a-radio-group>
          <!-- textarea -->
          <a-textarea
            v-model="form[item.prop]"
            :placeholder="item.placeholder"
            :rows="item.rows"
            :size="item.size"
            :style="item.style"
            v-if="item.type === 'textarea'"
            :disabled="item.disabled"
            @change="textareaChange(item.change,$event)"
            @blur="textareaBlur(item.blur,$event)"
          />
          <!-- switch -->
          <a-switch
            :checked-children="item.checkedChildren"
            :un-checked-children="item.unCheckedChildren"
            :disabled="item.disabled"
            :default-checked="item.defaultChecked"
            v-if="item.type === 'switch'"
            :loading="item.loading"
            :size="item.size"
            :autoFocus="item.autoFocus"
            v-model="form[item.prop]"
            @change="switchChange(item.change,$event)"
          />
          <!-- rangePicker moment(item.startTime, item.dateFormat), moment(item.endTime, item.dateFormat) -->
          <a-range-picker
            :placeholder="item.placeholder"
            @change="rangePickerChange(item.change,$event)"
            :size="item.size"
            v-model="form[item.prop]"
            :disabled="item.disabled"
            :format="item.format"
            v-if="item.type === 'rangePicker'"
          >
            <a-icon :slot="item.slot" :type="item.icon" v-if="item.slot" />
          </a-range-picker>
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>

<script>
export default {
  props: {
    formNodeList: {
      type: [Object, Array],
      default: () => {}
    },
    form: {
      type: Object,
      default: {}
    },
    rules: {
      type: Object,
      default: {}
    },
    relForm: {
      type: String,
      default: ''
    },
    labelWidth: {
      type: String,
      default: ''
    }
  },
  data() {
    return {}
  },
  methods: {
    inputChange(change, e) {
      if (typeof change === 'function') {
        change(e)
      }
    },
    inputBlur(blur, e) {
      if (typeof blur === 'function') {
        blur(e, e.target.value)
      }
    },
    selectChange(change, e) {
      if (typeof change === 'function') {
        change(e)
      }
    },
    checkboxChange(change, e) {
      if (typeof change === 'function') {
        change(e)
      }
    },
    radioChange(change, e) {
      if (typeof change === 'function') {
        change(e, e.target.value)
      }
    },
    textareaChange(change, e) {
      if (typeof change === 'function') {
        change(e)
      }
    },
    textareaBlur(blur, e) {
      if (typeof blur === 'function') {
        blur(e, e.target.value)
      }
    },
    switchChange(change, e) {
      if (typeof change === 'function') {
        change(e)
      }
    },
    rangePickerChange(change, e) {
      if (typeof change === 'function') {
        change(e)
      }
    }
  }
}
</script>
<style>
</style>